import './index.scss'
import { Form, Button, Input, Toast } from 'antd-mobile'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import React, { useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import apis from '@/apis'
import CODE from '@/apis/code.config'
const Login: React.FC = () => {
  const { isRegister } = useParams()
  const navigate = useNavigate()
  const [visible, setVisible] = useState(false)
  const [form] = Form.useForm()
  async function onFinish({
    username,
    newPassword,
  }: {
    username: string
    newPassword: string
  }) {
    if (!username) {
      return Toast.show({
        content: '请输入账号',
      })
    }
    if (!newPassword) {
      return Toast.show({
        content: '请输入密码',
      })
    }
    if (isRegister === 'Y') {
      const res = await apis.registerApi({ username, password: newPassword })
      if (res.data.code === CODE.SUCCESS) {
        Toast.show({
          content: '注册成功',
        })
        navigate('/mobile/login')
      } else {
        Toast.show({
          content: res.data.message,
        })
      }
    } else {
      // 为了少写页面 username 代替新密码
      const res = await apis.editPasswordApi({
        username: username,
        newPassword: newPassword,
      })
      if (res.data.code === CODE.SUCCESS) {
        Toast.show({
          content: '重置成功',
        })
        navigate('/mobile/login')
      } else {
        Toast.show({
          content: res.data.message,
        })
      }
    }
  }
  return (
    <div className="b-g">
      <div className="title_box">
        {isRegister === 'Y' ? '注册账号' : '重置密码'}
      </div>
      <Form
        layout="horizontal"
        onFinish={onFinish}
        form={form}
        footer={
          <Button block type="submit" color="primary" size="large">
            {isRegister === 'Y' ? '注册' : '重置'}
          </Button>
        }
      >
        <Form.Item label="用户名" name="username">
          <Input
            placeholder={
              isRegister === 'Y' ? '请输入用户名(支持中文)' : '请输入用户名'
            }
            clearable
          />
        </Form.Item>
        <Form.Item
          label={isRegister === 'Y' ? '密码' : '新密码'}
          name="newPassword"
          extra={
            <div className="eye">
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setVisible(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible(false)} />
              )}
            </div>
          }
        >
          <Input
            placeholder={
              isRegister === 'Y'
                ? '请输入新密码(6-12位)'
                : '请输入新密码(6-12位)'
            }
            clearable
            type={visible ? 'text' : 'password'}
          />
        </Form.Item>
      </Form>
      <div className="btnBox">
        <Button
          block
          type="primary"
          onClick={() => {
            navigate('/mobile/login')
          }}
        >
          返回登录
        </Button>
        <Button
          block
          type="primary"
          style={{ marginTop: 20 }}
          onClick={() => {
            navigate('/mobile')
          }}
        >
          返回首页
        </Button>
      </div>
    </div>
  )
}
export default Login
